<template>
	<view class="container">
		<view class="box">
			
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input :adjust-position="false" type="text" placeholder="请输入" confirm-type="search" v-model="kwd"></input>
					<button class="cu-btn search-btn shadow-blur round" @click="onSearch">搜索</button>
					
				</view>
				<view class="cu-btn cate-btn shadow-blur round" v-if="tabCurrentIndex<3">
					<picker @change="cateChange" :value="cateIndex" :range="catePicker">
						<view class="picker input">
							<image src="/static/images/shaixuan.png" class="png" mode="aspectFit"></image>
						</view>
						
					</picker>
				</view>
			</view>
			<view class="navbar">
				<view 
					v-for="(item, index) in navList" :key="index" 
					class="nav-item" 
					:class="{current: tabCurrentIndex === index}"
					@click="tabClick(index)"
				>
					{{item.text}}
				</view>
			</view>
			<!-- <view class="bg-white nav-item">
				<view class="flex flex-wrap">
					<view class="basis-xs border-right">适用省市∨</view>
					<view class="basis-xs ">服务类型∨</view>
					
				</view>
			</view> -->
		</view>
		<scroll-view
			class="list-scroll-content" 
			scroll-y
			@scrolltolower="loadData('add')"
		>
			<!-- 空白页 -->
			<!-- <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty> -->
			
			<view class="cu-list menu-avatar">
				
				<view class="cu-item " v-for="(item,index) in tableList" :key="index" @click="goDetail(item)">
					<view class="content">
						<view class="col-1 flex">
							<image class="company-img" :src="bg_img" mode="aspectFit"></image>
							<view class="flex-sub padding-left text-con"><view class="text-cut text-black text-lg text-title">{{item.title}}</view>
							<view class="text-grey text-df dsc">课程简介：{{item.describe}}</view>
							<view class="text-grey text-df between">
								<view class="play"><image src="/static/images/play@2x.png" class="png" mode="aspectFit"></image>{{item.view}}</view>
								<view class="cu-time">{{item.updated_at.slice(0,10)}}</view>
								<view class="cu-btn agree round" v-if="tabCurrentIndex<3">￥{{item.price}}</view>
								<view class="cu-btn agree round" v-else>已购</view>
							</view>
							</view>	
						</view>
					</view>
				</view>
			</view>
			 
			<!-- <uni-load-more :status="tabItem.loadingType"></uni-load-more> -->
			
		</scroll-view>
		<!-- 绑定 -->
		<goReg 
			ref="goReg" 
			:contentHeight="580"
		></goReg>
	</view>
</template> 

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	import goReg from "@/components/goReg";

	export default {
		components: {
			uniLoadMore,
			empty,
			goReg
		},
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '求职指导',
						value:1,
						loadingType: 'more',
						cateList: []
					},
					{
						state: 1,
						text: '职场培训',
						value:2,
						loadingType: 'more',
						cateList: []
					},
					{
						state: 2,
						text: '劳动法规',
						value:3,
						loadingType: 'more',
						cateList: []
					},
					// {
					// 	state: 3,
					// 	text: '已购课程',
					// 	value:4,
					// 	loadingType: 'more',
					// 	cateList: []
					// },
				],
				modalName: null,
				cateIndex:-1,
				catePicker:[],
				cateIds:[],
				cateId:0,
				typeId:0,
				page:1,
				uId:0,
				kwd:'',
				bg_img:'https://apitest.hrzhizhang.com/file/2020-11-27/qzbg.jpg',
				tableList:[],
			};
		},
		
		onLoad(query){
			/**
			 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
			 * 替换onLoad下代码即可
			 */
			console.log(query);
			const scene = decodeURIComponent(query.scene)
			console.log(scene);
			// this.tabCurrentIndex = +options.state;
			// // #ifndef MP
			// this.loadData()
			// // #endif
			// // #ifdef MP
			// if(options.state == 0){
			// 	this.loadData()
			// }
			// // #endif
			// #ifdef MP-WEIXIN
			// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
			wx.getSetting({
				success(res) {
					console.log(res)
					// if (!res.authSetting['scope.userInfo']) {
					// 	console.log('scope.userInfo')
					// 	wx.authorize({
					// 	scope: 'scope.userInfo',
					// 	success () {
					// 	  // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
					// 		console.log(getUserInfo)
					// 		wx.getUserInfo({
					// 		success: function(res) {
					// 			console.log(res.userInfo)
					// 		}
					// 		})
					// 	},
					// 	fail(e){
					// 		console.log(e)
					// 	}
					//   })
					// }
			  }
			});
			// wx.login({
			// 	success: (res) => {
			// 		console.log(res);
			// 		if (res.code) {//微信登录成功 已拿到code
						
			// 			this.getOpenId(res.code);
						
						
			// 			// .then(function (response) {
			// 			// 	//这里只会在接口是成功状态返回
			// 			// 	console.log(data);
			// 			// 	// 设置用户信息
							
			// 			// }).catch(function (error) {
			// 			// 	//这里只会在接口是失败状态返回，不需要去处理错误提示
			// 			// 	console.log(error);
			// 			// });
						
			// 		} else {  
			// 			this.getCates();
			// 			console.log('登录失败！' + res.errMsg)  
			// 		}  
			// 	}  
			// })  
			// #endif		
			this.getCates();
			
		},
		
		methods: {
			//获取订单列表
			async loadData(type='add'){
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				
				let navItem = this.navList[index];
				let state = navItem.state;
				
				// if(navItem.loadingType === 'loading'){
				// 	//防止重复加载
				// 	return;
				// }
				//没有更多直接返回
				if(type === 'add'){
					if(navItem.loadingType === 'noMore'){
						return;
					}
					
				}
					
				navItem.loadingType = 'loading';
				if(this.tabCurrentIndex==3){
					let param = {
						kwd:this.kwd,
						user_id:this.uId,
						page:this.page,
						order_type:1,
						limit:5,
						};
					let that = this;
					let data = await this.$http.post(
						'trainOrderList', //可以直接放链接(将不启用全局定义域名)
						param, 
					);
					console.log(data);
					// if(data.last_page<=that.page){
					// 	navItem.loadingType = 'noMore';
					// }
					// else{
					// 	navItem.loadingType = 'more';
					// }
					// data.data.forEach(item => {
					// 	item.updated_at = ;
					// })
					that.tableList=that.tableList.concat(data.data)
					// that.tableList.push(data.data);
					that.$set(navItem, 'loaded', true);
					that.page++;
					// setTimeout(()=>{
						
					// 	this.$set(navItem, 'loaded', true);
						
					// 	//判断是否还有数据， 有改为 more， 没有改为noMore 
					// 	navItem.loadingType = 'more';
					// }, 600);	
				}
				else{
					let param = {
						kwd:this.kwd,
						user_id:this.uId,
						type:this.typeId,
						cate_id:this.cateId,
						page:this.page,
						status:2,
						limit:5,
						};
					let that = this;
					let data = await this.$http.post(
						'trainList', //可以直接放链接(将不启用全局定义域名)
						param, 
					);
					console.log(data);
					// if(data.last_page<=that.page){
					// 	navItem.loadingType = 'noMore';
					// }
					// else{
					// 	navItem.loadingType = 'more';
					// }
					that.tableList=that.tableList.concat(data.data)
					// that.tableList.push(data.data);
					that.$set(navItem, 'loaded', true);
					that.page++;
					// setTimeout(()=>{
						
					// 	this.$set(navItem, 'loaded', true);
						
					// 	//判断是否还有数据， 有改为 more， 没有改为noMore 
					// 	navItem.loadingType = 'more';
					// }, 600);	
				}
				
				
			}, 
			async getOpenId(code){
				let param = {
					wx_code:code,
					};
				let data = await this.$http.post(
					'openId', //可以直接放链接(将不启用全局定义域名)
					param, 
				);
				this.uId = data.id;
				uni.setStorageSync('userId',data.id);
				uni.setStorageSync('userInfo',data);
				this.getCates();
			},
			goDetail(item){
				let uId = uni.getStorageSync('userId');
				// let uId =1;
				if(uId>"0"&&uId!=undefined){
					uni.setStorageSync('trainInfo',item);
					uni.navigateTo({
						// url: `/pages/works/detail?id=${id}`
						url: `/pages/tabbar/tabbar-1/trainInfo`
					})
					return;
				}
				
				this.$refs.goReg.showModal('regModal');	
				return;
				
			},
			onSearch(){
				this.typeId=0;
				this.cateId=0;
				this.page=1;
				this.tableList=[];
				this.loadData('refush');
			},
			//swiper 切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index){
				if(index==1){
					this.bg_img='https://apitest.hrzhizhang.com/file/2020-11-27/pybg.jpg'
				}
				else if(index==2){
					this.bg_img='https://apitest.hrzhizhang.com/file/2020-11-27/ldbg.jpg'
				}
				else{
					this.bg_img='https://apitest.hrzhizhang.com/file/2020-11-27/qzbg.jpg'
				}
				this.tabCurrentIndex = index;
				console.log(index)
				this.catePicker=['全部类型'];
				this.cateIds=[-1];
				
				let cate = this.navList[index].cateList;
				cate.forEach(item => {
					this.catePicker.push(item.label);
					this.cateIds.push(item.value);
				})
				this.typeId = this.navList[index].value;
				
				this.cateId = 0;
				this.cateIndex = -1;
				this.page=1;
				this.tableList=[];
				this.loadData('refush');
			},
			cateChange(e){
				let index = e.detail.value
				this.cateIndex = index;
				let cateId = this.cateIds[index];
				
				console.log(cateId)
				this.cateId = cateId>0?cateId:0;
				this.page=1;
				this.tableList=[];
				this.loadData('refush');
			},
			async getCates(){
				let param = '';
				let that = this;
				let data = await this.$http.post(
					'trainCateList', //可以直接放链接(将不启用全局定义域名)
					param, 
				);
				for(var i=0;i<3;i++){
					that.navList[i].cateList = data[i].children;
					that.navList[i].value = data[i].value;
					that.navList[i].text = data[i].label;
				}
				that.catePicker=['全部类型'];
				that.cateIds=[-1];
				
				// that.catePicker = that.navList[0].cateList;
				let cate = that.navList[0].cateList;
				that.typeId = that.navList[0].value;
				cate.forEach(item => {
					that.catePicker.push(item.label);
					that.cateIds.push(item.value);
				})
				// that.multiArray = [that.provinceData,that.citysData];
				console.log(that.navList);
				that.page=1;
				that.loadData('refush');
				// console.log(data);
			},
		},
	}
</script>

<style lang="scss">
	page, .container{
		background: $page-color-base;
		height: 100%;
	}
	.cu-bar{
		min-height: 40px;
		.search-form{
			height:65rpx;
			// margin-right: 0;
		}
	}
	.container{
		padding-top: 96px;
		.box{
			position: fixed !important;
			top:0px;
			width: 100%;
		}
	}
	.search-btn{
		background-color: #4CA5FE !important;
		color: #FFF;
		height: 65rpx;
	}
	.cate-btn{
		background-color: #FFFFFF !important;
		width: 32px;
		color: #FFF;
		margin: 0 10px;
		image{
			width: 16px;
			height: 16px;
		}
	}
	
	.swiper-box{
		height: calc(100% - 40px);
	}
	.list-scroll-content{
		height: 100%;
	}
	
	.navbar{
		display: flex;
		height: 36px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: #4CA5FE;
			}
		}
		
	}
	.basis-xs{
		flex-basis: 50%;
		padding: 10px 0;
		text-align: center;
	}
	.border-right{
		border-right: 1upx solid #909399;
	}
	.uni-swiper-item{
		height: auto;
	}
	
	.cu-list.menu-avatar {
		margin: 15px;
	}
	
	.cu-item{
		padding: 0 !important;
		height: 110px !important;
		background-color: #F2F6F8 !important;
		margin-bottom: 15px !important;
	}
	.cu-list.menu-avatar>.cu-item .content {
		width: 100%;
		line-height: 1.6em;
		left: 1px;
		background: #FFF;
		z-index: 10;
		border-radius: 10px;
		padding: 10px;
	}
	
	.company-img{
		width: 80px;
		height: 90px;
	}
	.play{
		width: 50px;
		image{
			display: inline-block;
			margin-right: 5px;
			width: 15px;
			height: 15px;
			vertical-align: middle;
		}
	}
	.dsc{
		height: 50px !important;
	}
	.between{
		justify-content: space-between;
		display: flex;
	}
	.line{
		border-bottom: 1px solid #4CA5FE;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	
	.text-white{
		margin: 0px 15px;
		font-size: 14px;
		text-align: center;
	}
	
	.text-title{
		font-size: 16px !important;
		font-weight: bold;
		line-height: 20px;
	}
	
	.text-con{
		width: 60%;
		font-size: 12px;
		line-height: 15px;
		.text-df{
			// height: 20px;
			padding-top: 5px;
			line-height: 13px;
			font-size: 12px;
			overflow: hidden;
		}
	}
	
	.radius{
		border-radius: 10px;
	}
	
	.bg-red {
		border-radius: 0 10px 10px 0;
	}
	.text-info{
		width: 200px;
		height: 30px;
		line-height: 30px;
		overflow: hidden;
		font-size: 14px;
		text{
			margin-right: 20px;
		}
	}
	.col-1{
		justify-content: space-between;
	}
	.agree{
		width: 60px;
		justify-content: flex-end;
		height: 14px;
		font-size: 12px;
		background-color: #FFFFFF !important;
		// color: #FC7A7A;
		.cuIcon-coin{
			font-size: 20px;
		}
	}
	.cu-time{
		// width: 120upx;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		line-height: 15px;
	}
	.reward{
		color: #FF4400;
		font-size: 20px;
		font-weight:bold;
		top: -45px;
		position: relative;
	}
	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}
	
	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}
	
	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px
	}
	
	.uni-load-more__img>view {
		position: absolute
	}
	
	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}
	
	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}
	
	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0
	}
	
</style>
